<script lang="ts" setup>
import { computed } from 'vue'
import BaseCurrencyIcon from './BaseCurrencyIcon.vue'

interface Props {
  cur: EnumCurrencyKey
  amount: number | string
  /** 正数颜色 */
  positiveColor?: string
  /** 负数颜色 */
  negativeColor?: string
  /** 加密货币是否要单位 */
  withCryptoUnit?: boolean
  /** 货币图标位置 */
  iconPosition?: 'front' | 'back'
  /** 是否展示图标 */
  icon?: boolean
  /** 是否展示+- */
  symbol?: boolean
  /** 是否展示法币货币符号 */
  prefix?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  withCryptoUnit: false,
  iconPosition: 'back',
  icon: true,
  symbol: false,
  prefix: false
})


const suffixLength = computed(() => currencyConfig[props.cur].decimal)
const handledAmount = computed(() => {
  const amount = application.formatNumDecimal(props.amount, suffixLength.value)
  if (props.symbol && Number(props.amount) > 0) {
    return `+${amount}`
  }
  return amount
})


const isCrypto = application.isVirtualCurrency(props.cur)

const isShowUnit = !isCrypto || (props.withCryptoUnit && isCrypto)

const ComputedTextStyle = computed(() => {
  let color: undefined | string = undefined
  if (Number(props.amount) > 0 && props.positiveColor) {
    color = props.positiveColor
  } else if (Number(props.amount) < 0 && props.negativeColor) {
    color = props.negativeColor
  }
  return { color, fontSize: 'var(--tg-base-amount-font-size)' }
})
const ComputedImageStyle = computed(() => {
  return {
    order: props.iconPosition === 'front' ? '-1' : '0',
    margin: props.iconPosition === 'front' ? `0 var(--tg-base-amount-margin) 0 0` : `0 0 0 var(--tg-base-amount-margin)`,
    width: 'var(--tg-base-amount-icon-size)',
    height: 'var(--tg-base-amount-icon-size)',
  }
})
</script>

<template>
  <div class="inline-flex items-center justify-center">
    <div class="flex items-center ">
      <span class="font-extrabold" :style="ComputedTextStyle">
        <span v-if="isShowUnit && !isCrypto">{{ cur }}&nbsp;</span>
        <span>{{ handledAmount }}</span>
        <span v-if="isShowUnit && isCrypto">&nbsp;{{ cur }}</span>
      </span>
    </div>
    <div
      v-if="icon"
      class="inline-flex shrink-0 items-center justify-center rounded-full"
      :style="ComputedImageStyle">
      <BaseCurrencyIcon :cur="cur" style="--tg-base-currency-icon-width:var(--tg-base-amount-icon-size);" />
    </div>
  </div>
</template>

<style>
:root {
  --tg-base-amount-font-size: 0.875rem;
  --tg-base-amount-icon-size: 0.875rem;
  --tg-base-amount-margin: 0.25rem;
}
</style>
